<template>
  <div :style="bor" :class="classA" ref="comp">
    <span :style="mar"
      >编号：<input
        v-model="newid"
        class="in-one"
        type="text"
        placeholder=""
        @keydown.enter="adddd"
    /></span>
    <span :style="mar"
      >品牌名称：<input
        v-model="newAddText"
        class="in-one"
        type="text"
        placeholder=""
        @keydown.enter="adddd"
    /></span>
    <button :style="btn" v-on:click="add()">添加</button>
  </div>
</template>
<style>
/* * {
  margin: 0;
  padding: 0;
} */

.dv1 {
  width: 800px;
  height: 50px;
  margin-top: 20px;
}
</style>
<script>
export default {
  data() {
    return {
      msg: "第一个组件",
      bor: {
        border: "1px solid black",
        display: "flex",
      },
      spanHtml: '编号:<input class="in-one" type="text">',
      spanHtmltwo: '品牌名称:<input class="in-one" type="text">',
      spanHtmlthree:
        '品牌名称:<input class="in-one" type="text" placeholder="请输入搜索条件">',
      classA: "dv1",
      mar: {
        margin: "10px",
        display: "block",
      },
      btn: {
        height: "30px",
        width: "50px",
        margin: "auto",
      },
      newid: "", //对象不能用等号
      newAddText: "", //对象不能用等号
    };
  },
  methods: {
    addd() {},
    add() {
      if (!this.newid || !this.newAddText) {
        return;
      }
      this.$bus.$emit("add-todo", this.newid, this.newAddText);
      this.newid="";//输入完之后将输入框置空
      this.newAddText = "";//输入完之后将输入框置空
    },
  },
};
</script>